<template>
  <div class="header-container">
    <div class="l-content">
      <div class="icon-container" v-if="$store.state.isCollapse">
        <i class="el-icon-s-grid icon" @click="changeMenu"></i>
      </div>
      <div class="icon-container" v-else>
        <i class="el-icon-s-fold icon" @click="changeMenu"></i>
      </div>
      <el-breadcrumb separator="/" style="margin-left: 15px">
        <el-breadcrumb-item v-for="item in tabData" :key="item.title">
          <span>{{ item.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" effect="dark" placement="bottom">
        <div class="right-menu-item hover-effect">
          <svg-icon @click="toggleFullScreen" size="0.4rem" :icon-file-name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"/>
        </div>
      </el-tooltip>
      <el-dropdown @command="handleClick">
                <span class="el-dropdown-link">
                    <img class="user"
                         :src="( 'https://qiniu.suqi.store/images/15665270-2549-4c3c-9dcb-f2072ed3676d.jpg' )"
                         alt="头像">
                </span>
        <el-dropdown-menu>
          <el-dropdown-item>{{ $store.state.currentUser.name }}</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {userLogout} from "@/apis/user";
import {mapState} from 'vuex'

export default {
  data() {
    return {
      isFullscreen: false,
    };
  },
  methods: {
    changeMenu() {
      // 相当于调用这个方法,修改导航栏状态
      this.$store.commit('CollapseMenu')
    },
    handleClick(command) {
      if (command === 'logout') {
        //退出登录
        userLogout().then((result) => {
          if (result.data.code === 1) {//退出成功
            // 移除用户角色设置
            this.$store.commit("loadRole", -1)
            //移除令牌信息
            this.$store.commit("removeJwtToken");
            // 移除用户信息
            this.$store.commit("loadCurrentUser", {});
            //返回首页
            this.$router.push('/')
          } else {
            this.$message({
              message: result.data.msg,
              typeIdList: "error"
            });
          }
        })
      }
    },
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        // 进入全屏
        document.documentElement.requestFullscreen();
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
      this.isFullscreen = !this.isFullscreen;
    },
  },
  mounted() {
    // 检测全屏状态并更新 isFullscreen 变量
    this.isFullscreen = !!document.fullscreenElement;
    document.addEventListener('fullscreenchange', this.onFullscreenChange);
  },
  beforeDestroy() {
    // 在组件销毁时移除事件监听器
    document.removeEventListener('fullscreenchange', this.onFullscreenChange);
  },
  computed: {
    //将面包屑数据列表中的数据放到该组件中的计算属性中,实时更新显示
    ...mapState({
      tabData: state => state.adminTab.tabList
    })
  }
}
</script>

<style scoped>
.icon-container {
  display: flex; /* 设置为弹性容器 */
  justify-content: center; /* 水平居中对齐图标 */
  align-items: center; /* 垂直居中对齐图标 */
  height: 100%; /* 占满容器高度 */
}

.icon {
  font-size: 32px; /* 图标的大小 */
}

.header-container {
  background-color: #ddeabe;
  height: 60px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 20px;

  .el-dropdown-link {
    cursor: pointer;
    color: #32da40;

    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}

.l-content {
  display: flex;
  align-items: center;

  .el-breadcrumb {
    margin-left: 15px;

    /deep/ .el-breadcrumb__item {
      .el-breadcrumb__inner {
        &.is-link {
          color: #666;
        }
      }

      &:last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }
    }
  }
}

.r-content {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 水平对齐 */

  /* 其他样式... */
}

.right-menu-item {
  display: inline-block;
  padding: 0 8px;
  height: 100%;
  font-size: 22px;
  color: #5a5e66;

  &.hover-effect {
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
}
</style>
